<template>
  <div>
    <div class="search-con search-con-top">
      <div class="fl">
        <Input clearable placeholder="输入商品分类名称搜索" class="search-input" v-model="condition.name"/>
        <Button class="search-btn" type="primary" @click="List">搜索</Button>
      </div>
      <div class="fr">
        <Button class="search-btn" type="primary" @click="vivisle=true;status=true">新增商品分类</Button>
      </div>
    </div>
    <tables ref="tables" editable :border="true" v-model="tableData" :columns="columns" :page="page" @pageSize="pageSize" @pageNum="pageNum"/>
    <Modal
        title="商品分类管理"
        v-model="vivisle"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="handleReset('tableItem')"
        class-name="vertical-center-modal">
        <Form ref="tableItem" :model="tableItem" :rules="ruleValidate" :label-width="80">
          <FormItem label="分类名称" prop="name">
              <Input v-model="tableItem.name" placeholder="请输入商品分类名称"></Input>
          </FormItem>
           <FormItem label="停用状态">
              <i-switch size="large" :value="status" @on-change="changestatus"/>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="handleReset('tableItem')">取消</Button>
        <Button type="primary" size="large" @click="Save('tableItem')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "_c/tables";
import { typeD, typeS, typeL } from "@/api/data";
export default {
  name: "Account",
  components: {
    tables: Tables
  },
  data() {
    return {
      vivisle: false,
      // id
      itemId: "",
      // 详情
      status: false,
      tableItem: {},
      // 条件
      condition: {
        category: 3,
        pageNum: 1,
        pageSize: 10
      },
      // table表头
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
          key: ""
        },
        {
          title: "商品分类名称",
          key: "name"
        },
        {
          title: "状态",
          key: "status"
        },
        {
          title: "操作",
          key: "handle",
          button: [
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.itemId = params.row.id;
                        this.tableItem.category = params.row.category
                        this.tableItem.id = params.row.id
                        this.tableItem.name = params.row.name
                        this.$set(this,'status',params.row.status=='正常' ? true : false)
                        this.Query(this.tableItem);
                      }
                    }
                  },
                  "编辑"
                )
              ];
            },
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?"
                  },
                  on: {
                    "on-ok": () => {
                      this.itemId = params.row.id;
                      this.Delete();
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px"
                      }
                    },
                    "删除"
                  )
                ]
              );
            }
          ]
        }
      ],
      // table数据
      tableData: [],
      // 分页数据
      page: {
        current: 1,
        total: 0,
        pageSize: 10
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "商品分类名称不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.List();
  },
  methods: {
    changestatus (status1) {
        // this.$Message.info('开关状态：' + status1);
        this.$set(this,'status',status1)
        // this.$Message.info('------------' + this.status);
    },
    handleReset (name) {
      this.vivisle = false
      this.$refs[name].resetFields();
      this.$set(this,'status',false)
    },
    pageSize(value) {
      this.condition.pageSize = value
      this.condition.pageNum = 1
      this.List()
    },
    pageNum(value) {
      this.condition.pageNum = value
      this.List()
    },
    change1 (item) {
      this.condition.category = item
    },
    change (item) {
      this.tableItem.category = item.value
    },
    // 分页数据获取
    List() {
      typeL(this.condition).then(res => {
        if (res.code==1) {
        let { data, total } = res.data;
        data.forEach(ele => {
          ele.status = ele.status==0?'停用':'正常'
        });
        this.tableData = data;
        this.page.total = total;
        }
      });
    },
    Query() {
      this.vivisle = true
    },
    // 保存
    Save(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var obj = this.tableItem
          obj.category = 3
          obj.status = this.status==false?0:1
          typeS(obj).then(res => {
            if (res.code === 1) {
              this.handleReset(name)
              this.vivisle = false
              this.List();
            }
          });
        }
      });

    },
    // 删除
    Delete() {
      typeD({ id: this.itemId }).then(res => {
        if (res.code === 1) {
          this.itemId = "";
          this.List();
        }
      });
    }
  }
};
</script>
